@import "theme.styl"

article#article-main-page,div.gt-comments
  text-align left
  h1, h2, h3, h4, h5, h6
    padding-bottom 15px
    padding-top 90px
    margin-top -70px
    font-weight 700
    text-align justify
    color $default-title-color
    &:focus
      outline none
    @media only screen and (max-width: $responsive-sm)
      padding-top 35px
      margin-top -15px
    @media screen and (min-width: $responsive-sm)
      padding-top 50px
      margin-top -30px
    @media screen and (min-width: $responsive-md)
      padding-top 70px
      margin-top -50px
    @media screen and (min-width: $responsive-lg)
      padding-top 90px
      margin-top -70px
  h1
    font-size 27px
    @media only screen and (max-width: $responsive-sm)
      font-size 20px
    @media screen and (min-width: $responsive-sm)
      font-size 22px
    @media screen and (min-width: $responsive-md)
      font-size 24px
    @media screen and (min-width: $responsive-lg)
      font-size 27px
  h2
    font-size 25px
    @media only screen and (max-width: $responsive-sm)
      font-size 18px
    @media screen and (min-width: $responsive-sm)
      font-size 20px
    @media screen and (min-width: $responsive-md)
      font-size 22px
    @media screen and (min-width: $responsive-lg)
      font-size 25px
  h3
    font-size 22px
    @media only screen and (max-width: $responsive-sm)
      font-size 16px
    @media screen and (min-width: $responsive-sm)
      font-size 18px
    @media screen and (min-width: $responsive-md)
      font-size 20px
    @media screen and (min-width: $responsive-lg)
      font-size 22px
  h4, h5, h6
    font-size 20px
    @media only screen and (max-width: $responsive-sm)
      font-size 14px
    @media screen and (min-width: $responsive-sm)
      font-size 16px
    @media screen and (min-width: $responsive-md)
      font-size 18px
    @media screen and (min-width: $responsive-lg)
      font-size 20px
  ul
    list-style-type square
    color $default-info-color
    @media only screen and (max-width: $responsive-sm)
      line-height 1.1em
      padding-left 0.5em
      margin 0.3em 0
    @media screen and (min-width: $responsive-sm)
      line-height 1.1em
      padding-left 0.5em
      margin 0.5em 0
    @media screen and (min-width: $responsive-md)
      line-height 1.1em
      padding-left 0.5em
      margin 1em 0
    @media screen and (min-width: $responsive-lg)
      line-height 1.1em
      padding-left 0.5em
      margin 1em 0
    > li
      list-style disc
      font-weight 200
      @media only screen and (max-width: $responsive-sm)
        font-size 14px
        margin 0.2em 0
      @media screen and (min-width: $responsive-sm)
        font-size 14px
        margin 0.3em 0
      @media screen and (min-width: $responsive-md)
        font-size 15px
        margin 0.3em 0
      @media screen and (min-width: $responsive-lg)
        font-size 17px
        line-height 1.2em
        margin 0.5em 0
      > blockquote
        border-left none
        > p
          font-size 0.82em
  ol
    color $default-info-color
    @media only screen and (max-width: $responsive-sm)
      line-height 1.1em
      padding-left 1em
      margin 0.3em 0
    @media screen and (min-width: $responsive-sm)
      line-height 1.2em
      padding-left 1em
      margin 0.5em 0
    @media screen and (min-width: $responsive-md)
      line-height 1.5em
      padding-left 1.5em
      margin 1em 0
    @media screen and (min-width: $responsive-lg)
      line-height 1.5em
      padding-left 1.5em
      margin 1em 0
    > li
      list-style decimal
      font-weight 200
      @media only screen and (max-width: $responsive-sm)
        font-size 14px
        margin 0.2em 0
        line-height 1.3em
      @media screen and (min-width: $responsive-sm)
        font-size 14px
        margin 0.3em 0
        line-height 1.4em
      @media screen and (min-width: $responsive-md)
        font-size 15px
        margin 0.4em 0
        line-height 1.4em
      @media screen and (min-width: $responsive-lg)
        font-size 17px
        margin 0.5em 0
        line-height 1.2em
      > blockquote
        border-left none

  ol + ul, ul + ol
    @media only screen and (max-width: $responsive-sm)
      margin-left 0.4em
    @media screen and (min-width: $responsive-sm)
      margin-left 0.6em
    @media screen and (min-width: $responsive-md)
      margin-left 0.7em
    @media screen and (min-width: $responsive-lg)
      margin-left 1em
  p
    font-size 16px
    font-weight 300
    line-height 25px
    margin 15px 0
    color $default-title-color
    word-wrap break-word
    @media only screen and (max-width: $responsive-sm)
      font-size 14px
      line-height 20px
      margin 5px 0
    @media screen and (min-width: $responsive-sm)
      font-size 14px
      line-height 20px
      margin 8px 0
    @media screen and (min-width: $responsive-md)
      font-size 15px
      line-height 22px
      margin 10px 0
    @media screen and (min-width: $responsive-lg)
      font-size 17px
      line-height 25px
      margin 15px 0
  img
    display block
    max-width 100%
    margin 0 auto
    cursor pointer
  blockquote
    padding 4px 5px 4px 12px
    margin 15px 0
    word-wrap break-word
    border-left .25em solid $default-link-hover-color
    background $default-border-color
    @media only screen and (max-width: $responsive-sm)
      padding-left 5px
      margin 8px 0
    @media screen and (min-width: $responsive-sm)
      padding-left 8px
      margin 10px 0
    @media screen and (min-width: $responsive-md)
      padding-left 10px
      margin 12px 0
    @media screen and (min-width: $responsive-lg)
      padding-left 12px
      margin 15px 0
    > p
      font-weight 300
      color $default-info-color
      @media only screen and (max-width: $responsive-sm)
        font-size 12px
        margin 0
        line-height 15px
      @media screen and (min-width: $responsive-sm)
        font-size 13px
        margin 3px 0
        line-height 17px
      @media screen and (min-width: $responsive-md)
        font-size 14px
        margin 5px 0
        line-height 18px
      @media screen and (min-width: $responsive-lg)
        font-size 15px
        margin 5px 0
        line-height 20px

  code
    li
     list-style none
     line-height 1em
     font-size 0.88em
  strong, b ,em
    font-weight 700
    color: orange

  table
    border-collapse collapse
    word-break normal
    width 100%
    margin 10px 0
    overflow auto
    &::-webkit-scrollbar
      width .4rem
      height .4rem
    &::-webkit-scrollbar-thumb
      background-color rgba(0, 0, 0, .26)
    td, th
      border 1px solid $default-border-hover-color
      color $default-info-color
      padding 8px
      min-height 30px !important
      vertical-align middle
    thead
      th
        color $default-desc-color
        background-color rgba($iview-main-primary-color, 0.1)
        font-weight 700
    tr:nth-child(odd)
      background $default-background-color
    tr:nth-child(even)
      background rgba($iview-main-primary-color, 0.03)


